<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirm-loading="confirmLoading"
    cancel-text="关闭"
    @ok="submit"
    @cancel="closeModal"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="用户名" >
          <a-input v-decorator="['username', validatorRules.username ]" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="电话" >
          <a-input v-decorator="['mobile', validatorRules.mobile ]" placeholder="请输入电话" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="昵称" >
          <a-input v-decorator="['nickname', validatorRules.nickname ]" placeholder="请输入昵称" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="角色" >
          <treeselect
            v-model="model.roleIds"
            :options="roles"
            multiple
            style="width: 370px;"
            placeholder="选择角色"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect';
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import ApiTree from '@/api/system/user';
import { getDeptTree, getDeptSuperior } from '@/api/system/dept';
import { getAll } from '@/api/system/role';
import { Slime } from '@/mixins/slime';
export default {
  name: 'Dept',
  components: { Treeselect },
  data() {
    return {
      title: '编辑',
      type: 0, // 0 添加 1 编辑
      confirmLoading: false,
      form: this.$form.createForm(this),
      id: null,
      model:{
        id:null,
        deptId:0,
        roleIds: [2],
      },
      depts: [],
      roles: [],
      validatorRules: {
        username: { rules: [{ required: true, message: '请输入用户名!' }] },
        mobile: { rules: [{ required: true, message: '请输入电话!' }] },
        nickname: { rules: [{ required: true, message: '请输入昵称!' }] },
      },
    };
  },
  mixins: [Slime],
  methods: {
    // 增
    crudCreate() {
      this.visible = true;
      this.type = 0;
      this.getDepts();
      this.getRoles()
    },
    // 改
    crudUpdate(data) {
      this.visible = true;
      this.type = 1;
      this.getDepts();
      this.getRoles()
      this.$nextTick(() => {
        this.form.setFieldsValue({
          username: data.username,
          mobile: data.mobile,
          nickname: data.nickname,
        });
      });
      this.model = {
        id: data.id,
        roleIds: [],
      };
      this.userRoles(data.id)
    },
    // 弹窗-获取部门信息
    getDepts() {
      // getDeptTree(0).then((res) => {
      //   this.depts = res.result.map(function (obj) {
      //     obj = { ...obj, label: obj.name };
      //     if (obj.subCount > 0) {
      //       obj.children = null;
      //     }
      //     return obj;
      //   });
      // });
    },
    // 弹窗-获取角色信息
    getRoles() {
      getAll().then((res) => {
        this.roles = res.result.records.map(function (obj) {
          obj = { ...obj, label: obj.name };
          if (obj.subCount > 0) {
            obj.children = null;
          }
          return obj;
        });
      });
    },
    // 弹窗-获取下一级的部门菜单
    getSupDepts(id) {
      getDeptSuperior(id).then((res) => {
        const data = res.result;
        const children = data.map(function (obj) {
          if (!obj.leaf && !obj.children) {
            obj.children = null;
          }
          obj = { ...obj, label: obj.name };
          return obj;
        });
        this.depts = [{ id: 0, label: '顶级类目', children: children }];
      });
    },
    // 弹窗-树状图内部门数据
    loadDepts({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        console.log('parentNode',parentNode)
        // getDeptTree(parentNode.id).then((res) => {
        //   parentNode.children = res.result.map(function (obj) {
        //     if (obj.subCount > 0) {
        //       obj.children = null;
        //     }
        //     obj = { ...obj, label: obj.name };
        //     return obj;
        //   });
        //   setTimeout(() => {
        //     callback();
        //   }, 100);
        // });
      }
    },
    // 通过用户id获取角色
    userRoles(id){
      ApiTree.getRoleIds(id).then((res) => {
        console.log(res.result)
        this.model.roleIds = res.result
      });
    },
    // // 弹窗-移除角色
    // deleteTag(value) {
    //   console.log('value',value)
    //   this.model.roleIds.forEach(function(data, index) {
    //     if (data === value) {
    //       this.model.roleIds.splice(index, value)
    //     }
    //   })
    // },
    // // 弹窗-改动角色
    // changeRole(value) {
    //   console.log('value',value)
    //   this.model.roleIds = []
    //   this.model.roleIds = value
    // },
    // 提交
    submit() {
      const that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          const param = {...values, ...that.model};
          console.log('param',param)
          if (that.type === 0) {
            that.submitCreate(param);
          } else {
            that.submitUpdate(param);
          }
        }
      });
    },
    // 提交 增
    submitCreate(param) {
      const that = this;
      ApiTree
        .create(param)
        .then((res) => {
          that.$message.success('新增成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 提交 改
    submitUpdate(param) {
      const that = this;
      ApiTree
        .update(param)
        .then((res) => {
          that.$message.success('编辑成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 弹窗-关闭
    closeModal() {
      this.confirmLoading = false;
      this.visible = false;
      this.form.resetFields()
      this.$emit('closeModal');
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>